<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LTS User to User Chat</title>
<style type="text/css">
body {
	background: #f2f2f2;
	margin: 0px;
	padding: 0px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	overflow:hidden;
}
#errors{
	float:left;
	font-size:10px;
	color:red;
	padding:5px;
}
#ora {
	float: right;
	padding: 5px;
	font-size: 10px;
}
#mesaj {
	width: 100%;
	position: relative;
	clear: both;
}
#mesaj textarea {
	width: 100%;
	height: 50px;
	margin: 0px;
	border:1px #333333 solid;
}
#mesaj form {
	height: 50px;
}
#mesaj input {
	width: 50px;
	height: 50px;
	border: 1px #333333 solid;
	background: #c1272d;
	color: white;
}
#mesaje {
	border:1px #333333 solid;
	padding:5px;
	vertical-align:top;
	overflow:visible;
}
#utilizatori{
	border:1px #333333 solid;
	width:150px;
	padding:5px;
	vertical-align:top;
}
.un_mesaj{
	width:100%;
	padding:3px;
}
.username{
	font-weight:bold;
	float:left;
}
.message{

}
</style>
<script type="text/javascript">

function getUrlVars() //takes the GET variables of this page. This page should be loaded with ?otheruserid= as the other person's id
	{
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
			{
				hash = hashes[i].split('=');
				vars.push(hash[0]);
				vars[hash[0]] = hash[1];
			}
		return vars;
	}

function process_page(uri,onjectid) { //this loads a page given by the uri (with get variables included) and prints it in the object given by onjectid.
	var url = uri;
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
		if (req.readyState == 4)
			{
				var str = req.responseText;
				if ((str!='null;')&&(str != null))
						{
							if(onjectid!='') document.getElementById(onjectid).innerHTML=str; //if an object to write to was specified, then write
							return true;
						}
							else
								{
									if(onjectid!='') document.getElementById(onjectid).innerHTML = '<div class="un_mesaj"><div class="username">System: </div><div class="message">No message Yet.</div></div>';
								}
        	}
        if (req.status != 200) {document.getElementById('errors').innerHTML = 'Servlet gave an error. Path might be wrong: '+uri;} //this error should be seen when a page was not found or that page returned an error
	};
    req.open('GET', url, true);
	req.setRequestHeader("Content-Type", "text/html");
    req.send(null);
	return true;
}


function do_refresh() //this is what is done every 1  second
	{
		var ourDate = new Date();
		document.getElementById('ora').innerHTML = ourDate.toLocaleString(); //shows the date
		var otheruserid = document.getElementById('otheruserid').value; //gets the other users id
		process_page('ConversationServlet?otheruserid='+otheruserid,'mesaje'); //send a request to the ConversationServlet with the get varuable otheruserid, and the result is written in the object mesaje (search for id="mesaje" in this page if you want to locate it)

		return true;
	}

function send_message() //this sends a message to the servlet.
	{
		var otheruserid = document.getElementById('otheruserid').value; //gets the user id to which to send
		var mesaj = document.getElementById('message_textarea').value; //gets the message

		process_page('SendMessageServlet?otheruserid='+otheruserid+'&message='+mesaj,''); //send a request to SendMessageServlet with the appropriet GET variables. Does not print the result.

		return true;
	}
</script>
</head>

<body onload="setInterval('do_refresh()',1000); //executes the given function every 1000 milliseconds
      ">

<div id="top">
<div id="errors"></div>
	<div id="ora">
		Date &amp; time</div>
</div>
<table style="width:100%; clear:both;">
	<tr>
		<td id="mesaje">

		</td>
		<td id="utilizatori">tinu<br />
		hexer</td>
	</tr>
</table>
<form>
	<table id="mesaj">
		<tr>
			<td>
			<input id="otheruserid" name="otheruserid" type="hidden" value="" />
			<textarea cols="50" name="message_textarea" id="message_textarea" onkeyup="if(event.keyCode==13){send_message();this.value='';}" rows="2"></textarea>
			</td>
			<td style="width: 50px;">
			<input name="Submit1" onclick="send_message();document.getElementById('message_textarea').value='';" type="button" value="Send" />
			</td>
		</tr>
	</table>
</form>
<script type="text/javascript">
	document.getElementById('otheruserid').value=getUrlVars()['otheruserid'];//reads the GET variables of this page and sets it so that it can be used in the form (search for type="hidden")
</script>

</body>

</html>
